{% extends 'layout.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/tiezi_read.css' %}">
<style>
    /* 浮动按钮的基本样式 */
.floating-button {
    position: fixed;  /* 固定定位 */
    right: 50px;     /* 距离右侧20px */
    bottom: 60px;    /* 距离底部20px */
    background: #4CAF50; /* 按钮背景色 */
    color: white;     /* 文字颜色 */
    border: none;     /* 无边框 */
    border-radius: 50%; /* 圆形按钮 */
    width: 60px;      /* 按钮宽度 */
    height: 60px;     /* 按钮高度 */
    font-size: 40px;  /* 字体大小 */
    cursor: pointer;  /* 鼠标悬停时显示指针手势 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 按钮阴影 */
    z-index: 100;     /* 确保按钮在页面其他内容的上方 */
    text-decoration: none;
}

/* 按钮悬浮效果 */
.floating-button:hover {
    background: #45a049;
}

/* 按钮显示和隐藏的动画效果 */
.floating-button.show {
    animation: showButton 0.5s ease forwards;
}

@keyframes showButton {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.comment-section {
    font-family: Arial, sans-serif;
    margin: 20px;
    padding: 10px;
    border: 1px solid #090909;
}

.comment, .reply {
    margin-bottom: 10px;
    padding: 5px;
    border-left: 3px solid #f108f9;
}

.comment-header, .reply-header {
    font-weight: bold;
    margin-bottom: 5px;
}

.comment-body, .reply-body {
    margin-bottom: 5px;
}

.user-name {
    color: #030303;
}

/* 确保回复的缩进一致，看起来是同一层级的 */
.reply {
    margin-left: 50px; /* 根据需要调整缩进大小 */
}

/* 可以为用户B和用户C的回复添加不同的样式，如果需要 */
.user-b .reply-header {
    color: #0066cc;
}

.user-c .reply-header {
    color: #cc0066;
}

.reply {
    margin-bottom: 10px;
    padding: 5px;

    border-left: 3px solid #0bbde0;
}

.reply-header, .reply-body p {
    margin: 0; /* 移除默认的外边距 */
}

.user-name {
    color: #040303;
    font-weight: bold;
}

.reply-text {
    display: flex; /* 使用Flexbox布局 */
    align-items: flex-start; /* 垂直方向上从顶部开始对齐 */
}

.reply-body p {
    margin-left: 10px; /* 在回复内容和回复者标识之间添加一些间隔 */
}
</style>
{% endblock %}
{% block content %}
    <div class="grid-container">
            <div class="post">
            <img src="{% static '/picture/tou.jpg' %}" alt="用户头像" class="avatar">
            <div class="user-info">
                <span class="username">{{ read_tiezi.user_id.name }}</span>
                <div class="post-meta">
                    <span class="post-time">发布时间： {{ read_tiezi.release_time }}</span>
                </div>
            </div>
            <div class="post-content">
                <h2 class="post-title">{{ read_tiezi.title }}</h2>
                <p class="post-detail">{{ read_tiezi.content }}</p>
            </div>
            <div class="post-actions">
                <button class="like-button">点赞 <span class="like-count">0</span></button>
                <button class="share-button">转发 <span class="share-count">0</span></button>
            </div>
            <div class="comments">
                <h3>评论区</h3>
                <div class="comment-form">
                    <textarea id="formpl" placeholder="写下你的评论..."></textarea>
                    <button class="submit-comment" id="plBtn">提交评论</button>
                </div>
            </div>
            <div class="comment-section">
                {% for obj,rep in dic.items %}
                <div class="comment">
                    <div class="comment-header">
                        <span class="user-name">{{ obj.user_id.name }}:</span>
                        <span class="comment-text">{{ obj.content }}</span>
                    </div>
                    <div class="comment-body">
                        <!-- <p></p> 或者 <p>这个好厉害</p> -->
                    </div>
                </div>
                    {% for li in rep %}
                        <div class="reply user-c">
                            <div class="reply-text">
                                <div class="reply-header">
                                    <span class="user-name">{{ li.0 }}:{{ li.1 }}：</span>
                                </div>
                                <div class="reply-body">
                                    <p>{{ li.2 }}</p>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% endfor %}
            </div>
        </div>
    </div>
    <button id="scroll-btn" class="floating-button">+</button>
{% endblock %}
{% block js%}
{#    <script>// 获取按钮元素#}
{#    document.addEventListener('DOMContentLoaded', function() {#}
{#        // 获取按钮元素#}
{#        var scrollBtn = document.getElementById('scroll-btn');#}
{##}
{#        // 添加点击事件监听器#}
{#        scrollBtn.addEventListener('click', function() {#}
{#            // 设置页面跳转的逻辑#}
{#            window.location.href = "/tiezi/add/";#}
{#        });#}
{#    });#}
{# </script>#}
    <script type="text/javascript">

    $(function () {
        bindBtnplEvent();
    })

    function bindBtnplEvent() {
        $("#plBtn").click(function () {
            var data = {
                tiezi_id: {{ read_tiezi.id }},
                content: $("#formpl").val()
            }
            $.ajax({
                url: "/tiezi/pl/",  //    => /order/delete/?uid=123
                type: "post",
                data: data,
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        location.reload();
                    } else {
                        // 删除失败
                        alert(res.error);
                    }
                }
            })
        });
    }
</script>
        <script>// 获取按钮元素
    document.addEventListener('DOMContentLoaded', function() {
        // 获取按钮元素
        var scrollBtn = document.getElementById('scroll-btn');

        // 添加点击事件监听器
        scrollBtn.addEventListener('click', function() {
            // 设置页面跳转的逻辑
            window.location.href = "/tiezi/add/";
        });
    });
 </script>
{% endblock %}
